<template>
	<view class="">
		<view class="resapp">
			<view class="result-title">
				<view class="big">
					<!-- {{risRezult.type}} -->
					{{userRisk.type}}
				</view>
				<view class="small">
					<!-- 有效期至：2022-03-27 -->
					有效期至：{{date}}
				</view>
			</view>
			<view class="risList">
				<view class="bear">
					<view class="">
						风险承受能力
					</view>
					<view class="caseBox">
						<template v-for="item in lineArray">
							<!-- <view :class="item<=risRezult.score?'line':'noline'" :key="item"></view> -->
							<view :class="item<=userRisk.bear?'line':'noline'" :key="item"></view>
						</template>
					</view>
				</view>
				<view class="bear">
					<view class="">
						期望投资收益
					</view>
					<view class="caseBox">
					<template v-for="item in lineArray">
						<!-- <view :class="item<=risRezult.score?'line':'noline'" :key="item"></view> -->
						<view :class="item<=userRisk.benefit?'line':'noline'" :key="item"></view>
					</template>
					</view>
				</view>
			</view>
			<view class="warning">
		<!-- 		您的风险承受能力较高，适合投资低风险，中低风险，中风
				险，中高风险等级产品；除此之外的高风险产品超出了您的
				风险承受能力，请谨慎选择(这段话乱讲的)。 -->
				{{userRisk.content}}
			</view>
		</view>
		<view class="chooseBox">
			<label class="text"  @tap="goResult">
					<radio  value="" style="transform:scale(0.6)" color="#D94B41"/><view class="">
						<label  class="radio">我已了解：我是 {{userRisk.type}} 投资者,本产品为中风险，符合我的承受能力。</label>
					</view>
			</label>
			<view class="button">
				<view class="checked" :class="!confime?'buyNotActive':'xxx'" @tap="goBuy()">继续购买</view>
				<view class="more" @tap="noBuy">暂不购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('users');
	export default {
		data() {
			return {
				confime: false, //协议状态
				risRezult:{
					type:"",
					endurance:"",
					revenue:"",
					score:""
				},
				date: new Date().toISOString().slice(0, 10).replace('2021','2022'),
				lineArray:[1,2,3,4,5]
			}
		},
		computed:{
			...mapState(['userRisk'])
		},
		methods: {
			//确认协议
			goResult(){
				this.confime=true
			},
			//跳转结果
			goBuy(){
				if(this.confime){
					uni.navigateBack()
				}
				// console.log(this.userRisk)
			},
			//不买了
			noBuy(){
				uni.navigateBack({
					data:1
				})
			}
		},
		onLoad(options){
			// const ris=options.ris
			// if(ris<20){
			// 	this.risRezult.type="谨慎性"
			// }else if(ris<40){
			// 	this.risRezult.type="保守性"
			// }else{
			// 	this.risRezult.type="积极型"
			// }
			// this.risRezult.score=Math.round(ris/10)
			// console.log(this.risRezult.score)
		}
	}
</script>
<style>
	page {
		background-color: #F1F1F1;
	}
</style>
<style scoped lang="scss">
	.resapp {
		padding: 0 40rpx;
		background: #F8F7F7;

		.result-title {
			display: flex;
			flex-direction: column;
			align-items: center;

			.big {
				font-size: 60rpx;
				font-weight: 600;
				color: #323232;
				margin-top: 70rpx;
			}

			.small {
				font-size: 32rpx;
				font-weight: 400;
				color: #474747;
				margin-top: 48rpx;
			}
		}

		.risList {
			height: 94rpx;
			margin-top: 50rpx;
			padding: 45rpx 25rpx;
			border-top: 1px solid #E6E6E6;
			border-bottom: 1px solid #E6E6E6;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			box-sizing: content-box;

			.bear {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.caseBox {
					width: 350rpx;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #7A7979;

					.line {
						height: 8rpx;
						width: 66rpx;
						background: #2D54A7;
					}

					.noline {
						height: 8rpx;
						width: 66rpx;
						background: #D1D1D1;
					}
				}
			}
		}

		.warning {
			padding: 48rpx 25rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #474747;
		}

	}

	.chooseBox {
		background-color: #f1f1f1;
		padding: 0 40rpx;

		.text {
			margin: 24rpx auto;
			font-size: 24rpx;
			font-weight: 400;
			color: #474747;
			display: flex;

			radio {
				margin-top: -15rpx;

				&::before {
					margin-top: -30rpx;
				}
			}
		}

		.button {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			view{
				width: 670rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				// border: 1rpx solid #007AFF;
				font-size: 32rpx;
				font-weight: 400;
				background: #3476F1;
				color: #FFFFFF;
			}

			.more {
				background: #D1D1D1;
				color: #474747;
				margin-top: 48rpx;
			}
		}
	}
	.buyNotActive{
		background-color:#D1D1D1 !important;
		color: black !important;
	}
</style>
